<template>
	<view class="good-detail">
		<view class="head">
			<view class="avatar-box">
				<image class="avatar" :src="imgPrex + goodDetail.goodPhoto" mode="scaleToFill">
				</image>
			</view>
			<view class="good-box">
				<view class="item"> 
				物品名称: <text>{{goodDetail.goodName}}</text>
				</view>
				<view class="item">
					物品重量: <text>{{goodDetail.weight}}</text> 千克
				</view>
			</view>
		</view>
		
		<view class="good-info">
		
				<view class="item">
					物品主人姓名: <text>{{goodDetail.userName}}</text>
				</view>
				<view class="item">
					存放仓库: <text>{{goodDetail.wareHouseName}}</text>
				</view>
				
				<view class="item">
					存放仓库编号: <text>{{goodDetail.wareHouseId}}</text>
				</view>
				<view class="item">
					存物订单号: <text class="order-num">{{goodDetail.saveOrderId}}</text>
				</view>
				<view class="item">
					取物订单号: <text class="order-num">{{goodDetail.takeOrderId}}</text>
				</view>
				<view class="item">
					物品占地面积: <text>{{goodDetail.floorSpace}}</text>
				</view>
				
				<view class="divider"> </view>
		        
				<view class="item">
					龙殿已守卫您的宝物: <text class="red">{{goodDetail.day}}</text> 天
				</view>
				<view class="item">
					存物时间: <text> {{goodDetail.saveTime}}</text>
				</view>
		</view>	
		
		<backBtn />
	</view>
</template>

<script>
	import { goodsDetail } from '/utils/api.js'
	import backBtn from '@/components/backBtn.vue'
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	export default {
		components: {backBtn},
		data() {
			return {
				imgPrex,
                type: 0,
				goodDetail: {
					 eltrInfo: null,
					 contact: null,
					 telephone: null,
					 doorTime: null,
				},
				orderList: [],
				goodId: '',
			}
		},
		onLoad(options) {
			const goodId = options.goodId;
			this.getGoodDeatil(goodId)
		},
		computed: {},
		methods: {
			// 获取物品详情
			async getGoodDeatil(goodId) {
				const res = await goodsDetail({goodId});
				this.goodDetail = res.data || {}
			},
			
			back () {
				uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="scss">
  .good-detail {
	  color: white;
	  padding: 40rpx 20rpx;

	  
	  .head {
		  display: flex;
		  align-items: top;
		  padding: 40rpx 10rpx;
		  border-radius: 10rpx;
		  font-size: 46rpx;
		  background-color: #202222;
		  .avatar-box {
			  width: 60px;
			  height: 60px;
			  border: 1rpx solid black;
			  border-radius: 8rpx;
			  overflow: hidden;
			  .avatar {
				  width: 60px;
				  height: 60px;
			  }
		  }
		  .item {
			  margin-left: 30rpx;
		  	  padding-left: 20rpx;
		  }
	  }
	  
	
	.good-info {
		margin: 20rpx 0;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		background-color: #202222;
		height: calc(100vh - 560rpx);
		.item {
			padding: 10rpx 20rpx;
			.order-num {
				font-size: 24rpx;
			}
		}
			
		.divider {
			height: 6rpx;
			margin: 20rpx;
			padding: 0rpx;
			background-color: white;
		}
		.red {
			color: red;
		}
	}
		  
	  
  }
</style>
